<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle> </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'name'">
          <EllipsisTooltip :title="record.name" :width="160">
            <span class="global-primary-text" @click="viewDetail(record)">
              {{ record.name }}
            </span>
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'nameType'">
          <span class="global-stop-status" v-if="record.nameType === 0">灰度</span>
          <span class="global-active-status" v-else-if="record.nameType === 1">生产</span>
        </template>
        <template v-else-if="column.dataIndex === 'status'">
          <span class="global-active-status" v-if="record.status === 'True'">运行中</span>
          <span class="global-stop-status" v-else-if="record.status === 'False'">未就绪</span>
        </template>
        <template v-else-if="column.dataIndex === 'replicas'">
          <a-tooltip placement="bottomLeft">
            <template #title>{{ record.replicasDescr }}</template>
            <div>{{ record.replicas }}</div>
          </a-tooltip>
        </template>
        <template v-else-if="column.dataIndex === 'namespace'">
          <EllipsisTooltip :title="record.namespace" :width="160">
            <a-tag color="success" class="global-border-radius">{{ record.namespace }}</a-tag>
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'image'">
          <EllipsisTooltip :title="record.image" :width="320">
            <a-tag color="#C0C0C0" class="global-border-radius">{{ record.image }}</a-tag>
          </EllipsisTooltip>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            class="g-operate-btn"
            v-auth="permissionCodeMap.workloadViewYaml"
            @click="openViewYaml(record)"
          >
            查看YAML
          </a-button>
        </template>
      </template>
    </BasicTable>
    <ViewYaml @register="viewYamlRegister" />
    <WorkloadDetail @register="tenantWorkloadRegister" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getWorkloadBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import WorkloadDetail from './components/WorkloadDetail.vue'
import ViewYaml from '@/views/deployUpgrade/components/ViewYaml/index.vue'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { WorkloadRecord } from '@/types/deployUpgrade'
import { message } from 'ant-design-vue'
import api from '@/api'
const { deploymentList } = api

const [viewYamlRegister, { openDrawer: viewYamlOpenDrawer, setDrawerProps }] = useDrawer()

const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: deploymentList,
  columns: getWorkloadBasicColumns(),
  useSearchForm: true,
  pagination: false,
  formConfig: getSearchFormConfig(),
  afterFetch: afterDataFetch,
  fetchSetting: {
    listField: 'list'
  },
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const [tenantWorkloadRegister, { openDrawer: WorkloadOpenDrawer }] = useDrawer()

// 表格返回数据处理
function afterDataFetch(data: WorkloadRecord[]) {
  let formData = getForm().getFieldsValue()
  if (formData && formData.name && data && data.length) {
    return data.filter((item: WorkloadRecord) => item.name && item.name.indexOf(formData.name) > -1)
  } else {
    return data
  }
}

// 镜像详情
const viewDetail = (record: WorkloadRecord) => {
  WorkloadOpenDrawer(true, {
    record
  })
}

const openViewYaml = (record: any) => {
  viewYamlOpenDrawer(true, { record, type: 'workload' })
}
</script>

<style lang="less" scoped></style>
